⬅ Back

OBJECT ITERATION IN JAVASCRIPT

This note explains object iteration in simple language.

Object iteration means going through an object one property at a time, getting its keys, getting its values, and working with its data step by step.

This is very important because objects are used everywhere in JavaScript: users, products, settings, API responses, statistics, and forms.

1. What is object iteration?

An object stores data as key-value pairs.

const book = {
  title: "The Last Kingdom",
  author: "Bernard Cornwell",
  rating: 8.38,
};

Object iteration means going through that data step by step.

For example, you may want to print all keys, print all values, count properties, or sum numeric values.

Diagram 1. Object iteration idea

book
│
├─ title  → "The Last Kingdom"
├─ author → "Bernard Cornwell"
└─ rating → 8.38

Iteration:
go through title
go through author
go through rating

Explanation

Just like array iteration goes through elements, object iteration goes through properties.

2. Objects are different from arrays

Arrays can be iterated directly with loops like for and for...of.

Objects are different. An object is not directly iterable like an array or a string.

That means you cannot do this:

for (const item of book) {
  console.log(item);
}

This will not work.

Diagram 2. Arrays vs objects

Array
→ has ordered elements
→ easy to iterate directly

Object
→ has key-value pairs
→ not directly iterable with for...of

Explanation

Because of this difference, JavaScript gives us special ways to iterate over objects.

3. The for...in loop

To iterate over object keys, JavaScript provides the for...in loop.

Syntax

for (key in object) {
  // code
}

On each iteration, key becomes the name of one property.

Diagram 3. Basic for...in structure

for (key in object) {
  code
}

1. take one key
2. run code
3. take the next key
4. run code again

Explanation

for...in moves through the property names of the object.

4. Example of for...in

This example shows how to correctly understand and read iteration with for...in.

Object

const book = {
  title: "The Last Kingdom",
  author: "Bernard Cornwell",
  rating: 8.38,
};

This object has keys and values.

Keys

Values

We can imagine it like this:

title  → "The Last Kingdom"
author → "Bernard Cornwell"
rating → 8.38

How to loop through the object

for (let key in book) {
  console.log(key);
}

Read for (let key in book) like this:

For every key inside the book object, repeat the code inside {}.

The variable key changes on every iteration.

Iteration 1

key = "title"

Iteration 2

key = "author"

Iteration 3

key = "rating"

So this code:

for (let key in book) {
  console.log(key);
}

prints:

title
author
rating

If we want to get the value, we write:

book[key]

Important: book[key] means: get the value of the current key.

Iteration 1

key = "title"
book[key] = book["title"]
book["title"] = "The Last Kingdom"

Iteration 2

key = "author"
book[key] = book["author"]
book["author"] = "Bernard Cornwell"

Iteration 3

key = "rating"
book[key] = book["rating"]
book["rating"] = 8.38

Full code

for (let key in book) {
  console.log(key + ":" + book[key]);
}

Read it like this: print the current key, then add the string ":", then add the value of this key.

This is called string concatenation.

First iteration

key + ":" + book[key]

becomes:

"title" + ":" + "The Last Kingdom"

Result:

title:The Last Kingdom

Full output

title:The Last Kingdom
author:Bernard Cornwell
rating:8.38

Very important: key is not always "title". It changes on every iteration.

So for...in is useful when we want to go through all keys in an object.

Diagram 4. What happens in for...in

Iteration 1:
key = "title"
book[key] = "The Last Kingdom"

Iteration 2:
key = "author"
book[key] = "Bernard Cornwell"

Iteration 3:
key = "rating"
book[key] = 8.38

Explanation

The loop gives you the key, and then you use that key to get the value.

5. Why square brackets are used here

Inside for...in, the variable key stores a string like:

"title"

So to get the property value, you must use:

book[key]

and not:

book.key

Diagram 5. book[key] vs book.key

key = "title"

book[key]
↓
book["title"]
↓
"The Last Kingdom"

book.key
↓
looks for a property literally named "key"
↓
undefined

Explanation

This is one of the most important rules in object iteration.

6. What for...in actually gives you

for...in gives you property names one by one. It does not directly give you the values.

You must get values yourself using:

object[key]

Diagram 6. What comes from for...in

for...in
↓
keys only

To get value:
object[key]

Explanation

So the normal pattern is:

7. Step-by-step example

const book = {
  title: "The Last Kingdom",
  author: "Bernard Cornwell",
  rating: 8.38,
};

for (const key in book) {
  console.log(key);
  console.log(book[key]);
}

Diagram 7. Full step-by-step flow

Start loop

Step 1:
key = "title"
print "title"
print book["title"] → "The Last Kingdom"

Step 2:
key = "author"
print "author"
print book["author"] → "Bernard Cornwell"

Step 3:
key = "rating"
print "rating"
print book["rating"] → 8.38

Loop ends

Explanation

This is the standard beginner pattern for iterating through object properties.

8. The Object.keys() method

JavaScript also gives a very useful method:

Object.keys(object)

It returns an array of keys from the object.

const book = {
  title: "The Last Kingdom",
  author: "Bernard Cornwell",
  genres: ["historical prose", "adventure"],
  rating: 8.38,
};

const keys = Object.keys(book);
console.log(keys); // ["title", "author", "genres", "rating"]

Diagram 8. What Object.keys() returns

book
│
├─ title
├─ author
├─ genres
└─ rating

Object.keys(book)
↓
["title", "author", "genres", "rating"]

Explanation

Instead of iterating over the object directly, JavaScript first creates an array of property names.

9. Why Object.keys() is useful

Once you have an array of keys, you can use normal array iteration like for...of.

This makes object iteration easier and more familiar.

Diagram 9. Object → array of keys → loop

Object
↓ Object.keys()
Array of keys
↓ for...of
iterate through keys

Explanation

This is a very common modern pattern.

10. Iterating over keys with for...of

const book = {
  author: "Bernard Cornwell",
  genres: ["historical prose", "adventure"],
  rating: 8.38,
};

const keys = Object.keys(book);

for (const key of keys) {
  console.log(key);
  console.log(book[key]);
}

Diagram 10. Object.keys() with for...of

keys = ["author", "genres", "rating"]

Iteration 1:
key = "author"
book[key] = "Bernard Cornwell"

Iteration 2:
key = "genres"
book[key] = ["historical prose", "adventure"]

Iteration 3:
key = "rating"
book[key] = 8.38

Explanation

This approach is often easier to understand because you are looping through a real array.

11. for...in vs Object.keys()

Both can be used for object iteration, but they work a little differently.

for...in

Directly goes through object keys.

Object.keys()

Creates an array of keys first, then you loop through that array.

Diagram 11. Two approaches

Option 1:
for...in
object → loop through keys

Option 2:
Object.keys()
object → array of keys → loop through array

Explanation

For beginners, Object.keys() with for...of is often easier to read and understand.

12. Empty object with Object.keys()

If an object has no properties, Object.keys() returns an empty array.

const emptyObject = {};
console.log(Object.keys(emptyObject)); // []

Diagram 12. Empty object keys

{}
↓ Object.keys()
[]

Explanation

No properties means no keys.

13. The Object.values() method

If Object.keys() returns an array of keys, then:

Object.values(object)

returns an array of values.

const book = {
  title: "The Last Kingdom",
  author: "Bernard Cornwell",
  rating: 8.38,
};

const values = Object.values(book);
console.log(values); // ["The Last Kingdom", "Bernard Cornwell", 8.38]

Diagram 13. What Object.values() returns

book
│
├─ title  → "The Last Kingdom"
├─ author → "Bernard Cornwell"
└─ rating → 8.38

Object.values(book)
↓
["The Last Kingdom", "Bernard Cornwell", 8.38]

Explanation

This method takes only the values and puts them into an array.

14. Object.keys() and Object.values() together

const book = {
  title: "The Last Kingdom",
  author: "Bernard Cornwell",
  rating: 8.38,
};

const keys = Object.keys(book);
console.log(keys); // ["title", "author", "rating"]

const values = Object.values(book);
console.log(values); // ["The Last Kingdom", "Bernard Cornwell", 8.38]

Diagram 14. Keys array vs values array

Object.keys(book)
↓
["title", "author", "rating"]

Object.values(book)
↓
["The Last Kingdom", "Bernard Cornwell", 8.38]

Explanation

One gives property names. The other gives property values.

15. Iterating over values with for...of

Since Object.values() returns a real array, you can use for...of.

const book = {
  title: "The Last Kingdom",
  author: "Bernard Cornwell",
  rating: 8.38,
};

const values = Object.values(book);

for (const value of values) {
  console.log(value);
}

Output

The Last Kingdom
Bernard Cornwell
8.38

Diagram 15. Iterating through values

values = ["The Last Kingdom", "Bernard Cornwell", 8.38]

Iteration 1:
value = "The Last Kingdom"

Iteration 2:
value = "Bernard Cornwell"

Iteration 3:
value = 8.38

Explanation

This is useful when you only care about values, not keys.

16. Example: summing numeric values

The lesson says values can be iterated, for example, to calculate a total.

const salaries = {
  aaron: 100,
  benjamin: 150,
  samuel: 120,
};

const values = Object.values(salaries);
let total = 0;

for (const value of values) {
  total += value;
}

console.log(total); // 370

Diagram 16. Summing object values

salaries
│
├─ aaron → 100
├─ benjamin  → 150
└─ samuel  → 120

Object.values(salaries)
↓
[100, 150, 120]

total = 0
↓
0 + 100 = 100
100 + 150 = 250
250 + 120 = 370

Explanation

This is a very practical use of Object.values().

17. When to use each approach

Use for...in when:

Use Object.keys() when:

Use Object.values() when:

Diagram 17. Which tool to choose

Need keys directly?
→ for...in

Need keys as an array?
→ Object.keys()

Need values as an array?
→ Object.values()

Explanation

This is the easiest way to choose the right tool.

18. Example: print only keys

const book = {
  title: "The Last Kingdom",
  author: "Bernard Cornwell",
  rating: 8.38,
};

for (const key in book) {
  console.log(key);
}

Output

title
author
rating

Diagram 18. Only keys

for...in over book
↓
"title"
"author"
"rating"

Explanation

This is useful when you only want property names.

19. Example: print only values

const book = {
  title: "The Last Kingdom",
  author: "Bernard Cornwell",
  rating: 8.38,
};

const values = Object.values(book);

for (const value of values) {
  console.log(value);
}

Output

The Last Kingdom
Bernard Cornwell
8.38

Diagram 19. Only values

Object.values(book)
↓
["The Last Kingdom", "Bernard Cornwell", 8.38]
↓
loop through array

Explanation

This is useful when property names do not matter.

20. Example: print keys and values

const book = {
  title: "The Last Kingdom",
  author: "Bernard Cornwell",
  rating: 8.38,
};

const keys = Object.keys(book);

for (const key of keys) {
  console.log(`${key}: ${book[key]}`);
}

Possible output

title: The Last Kingdom
author: Bernard Cornwell
rating: 8.38

Diagram 20. Key and value together

key = "title"
book[key] = "The Last Kingdom"

key = "author"
book[key] = "Bernard Cornwell"

key = "rating"
book[key] = 8.38

Explanation

This is one of the most useful patterns for object iteration.

21. Important note about object order

For beginner tasks, you can usually think of iteration as going through the object’s keys in the stored order.

But the main idea you should remember is this:

Object iteration is about keys and values, not about numeric indexes like arrays.

Diagram 21. Arrays vs objects again

Array iteration:
index → value

Object iteration:
key → value

Explanation

This is the core difference between array iteration and object iteration.

22. Common beginner mistakes

Mistake 1. Trying to use for...of directly on an object

Wrong:

for (const item of book) {
  console.log(item);
}

Objects are not directly iterable this way.

Mistake 2. Using dot notation with variable key

Wrong:

for (const key in book) {
  console.log(book.key);
}

Correct:

for (const key in book) {
  console.log(book[key]);
}

Mistake 3. Forgetting that Object.keys() returns an array of strings

const keys = Object.keys(book);

keys is not the original object. It is an array like:

["title", "author", "rating"]

Mistake 4. Forgetting that Object.values() returns only values

It does not give keys.

Diagram 22. Common mistakes

1. Object is not directly iterable with for...of
2. book.key ≠ book[key]
3. Object.keys() returns an array of keys
4. Object.values() returns an array of values

Explanation

These are the most common beginner mistakes in object iteration.

23. Practical examples

Example 1. Count the number of properties

const user = {
  name: "Nikita",
  age: 25,
  city: "Berlin",
};

const keys = Object.keys(user);
console.log(keys.length); // 3

Example 2. Print all values

const user = {
  name: "Nikita",
  age: 25,
  city: "Berlin",
};

for (const value of Object.values(user)) {
  console.log(value);
}

Example 3. Sum object values

const scores = {
  first: 10,
  second: 20,
  third: 30,
};

let total = 0;

for (const value of Object.values(scores)) {
  total += value;
}

console.log(total); // 60

Diagram 23. Real uses of object iteration

Need the number of properties?
→ Object.keys().length

Need all values?
→ Object.values()

Need key + value?
→ Object.keys() + book[key]
or for...in

Explanation

These are very common real-life uses of object iteration.

24. Quick summary

for...in

Loops through the keys of an object.

Object.keys(object)

Returns an array of the object’s keys.

Object.values(object)

Returns an array of the object’s values.

book[key]

Used when the property name is stored in a variable.

Diagram 24. Final map of object iteration

Object iteration
│
├─ for...in
│  └─ gives keys
│
├─ Object.keys()
│  └─ returns array of keys
│
└─ Object.values()
   └─ returns array of values

Explanation

This is the full beginner picture of object iteration.

25. Revision block

1. Objects are not directly iterable with for...of
2. for...in iterates over object keys
3. Inside for...in, the current key is stored in a variable
4. To get the value, use object[key]
5. Object.keys(object) returns an array of keys
6. Object.values(object) returns an array of values
7. Arrays returned by Object.keys() and Object.values() can be iterated with for...of
8. Object.values() is useful for summing numeric values

26. Final conclusion

Object iteration is very important because objects are everywhere in JavaScript.

If you understand why objects are different from arrays, how for...in works, how Object.keys() works, how Object.values() works, and why object[key] is needed during iteration, then you already have a strong base for working with real structured data.

Object iteration is used everywhere in full-stack development: reading API responses, showing user data, counting properties, building tables, summing statistics, and transforming data.

⬅ Back